<template>
  <div class="api-management-container">
    <a-card class="header-card">
      <a-row>
        <a-col :span="12">
          <a-input-search
            v-model:value="searchText"
            placeholder="搜索接口名称或路径"
            style="width: 300px"
            @search="onSearch"
          />
        </a-col>
        <a-col :span="12" class="text-right">
          <a-button type="primary" @click="showCreateModal">
            <PlusOutlined />
            新增接口
          </a-button>
        </a-col>
      </a-row>
    </a-card>

    <a-card class="content-card">
      <a-table
        :data-source="apiList"
        :columns="columns"
        :pagination="pagination"
        @change="handleTableChange"
        :loading="loading"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'method'">
            <a-tag :color="getMethodColor(record.method)">{{ record.method }}</a-tag>
          </template>
          <template v-else-if="column.dataIndex === 'status'">
            <a-tag :color="record.status === 1 ? 'success' : 'error'">
              {{ record.status === 1 ? '启用' : '禁用' }}
            </a-tag>
          </template>
          <template v-else-if="column.dataIndex === 'action'">
            <a-space>
              <a-button type="link" @click="editApi(record)">编辑</a-button>
              <a-button type="link" @click="deleteApi(record)">删除</a-button>
              <a-button type="link" @click="testApi(record)">测试</a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 新增/编辑接口 Modal -->
    <a-modal
      v-model:open="modalVisible"
      :title="editingApi ? '编辑接口' : '新增接口'"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
    >
      <a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="接口名称" required>
          <a-input v-model:value="form.name" placeholder="请输入接口名称" />
        </a-form-item>
        <a-form-item label="请求路径" required>
          <a-input v-model:value="form.path" placeholder="请输入请求路径" />
        </a-form-item>
        <a-form-item label="请求方法" required>
          <a-select v-model:value="form.method" placeholder="请选择请求方法">
            <a-select-option value="GET">GET</a-select-option>
            <a-select-option value="POST">POST</a-select-option>
            <a-select-option value="PUT">PUT</a-select-option>
            <a-select-option value="DELETE">DELETE</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="状态">
          <a-switch
            v-model:checked="form.status"
            checked-children="启用"
            un-checked-children="禁用"
          />
        </a-form-item>
        <a-form-item label="描述">
          <a-textarea v-model:value="form.description" placeholder="请输入接口描述" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { PlusOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

export default {
  name: 'ApiManagement',
  components: {
    PlusOutlined
  },
  data() {
    return {
      searchText: '',
      loading: false,
      modalVisible: false,
      editingApi: null,
      form: {
        name: '',
        path: '',
        method: 'GET',
        status: true,
        description: ''
      },
      apiList: [
        {
          id: 1,
          name: '用户列表',
          path: '/api/users',
          method: 'GET',
          status: 1,
          description: '获取用户列表信息',
          createTime: '2023-09-01 10:00:00'
        },
        {
          id: 2,
          name: '创建用户',
          path: '/api/users',
          method: 'POST',
          status: 1,
          description: '创建新用户',
          createTime: '2023-09-01 10:05:00'
        },
        {
          id: 3,
          name: '更新用户',
          path: '/api/users/{id}',
          method: 'PUT',
          status: 0,
          description: '更新用户信息',
          createTime: '2023-09-01 10:10:00'
        },
        {
          id: 4,
          name: '删除用户',
          path: '/api/users/{id}',
          method: 'DELETE',
          status: 1,
          description: '删除指定用户',
          createTime: '2023-09-01 10:15:00'
        }
      ],
      columns: [
        {
          title: '接口名称',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '请求路径',
          dataIndex: 'path',
          key: 'path'
        },
        {
          title: '请求方法',
          dataIndex: 'method',
          key: 'method'
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status'
        },
        {
          title: '描述',
          dataIndex: 'description',
          key: 'description'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          key: 'createTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action'
        }
      ],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 4
      }
    };
  },
  methods: {
    onSearch() {
      message.success('搜索功能已触发');
    },
    showCreateModal() {
      this.editingApi = null;
      this.form = {
        name: '',
        path: '',
        method: 'GET',
        status: true,
        description: ''
      };
      this.modalVisible = true;
    },
    editApi(record) {
      this.editingApi = record;
      this.form = { ...record };
      this.form.status = record.status === 1;
      this.modalVisible = true;
    },
    deleteApi(record) {
      const that = this;
      this.$confirm({
        title: '确认删除',
        content: `确定要删除接口 "${record.name}" 吗？`,
        onOk() {
          // 模拟删除操作
          message.success('删除成功');
          that.apiList = that.apiList.filter(item => item.id !== record.id);
        }
      });
    },
    testApi(record) {
      message.info(`测试接口: ${record.name}`);
    },
    handleModalOk() {
      if (!this.form.name || !this.form.path) {
        message.warning('请填写必填项');
        return;
      }

      if (this.editingApi) {
        // 编辑操作
        const index = this.apiList.findIndex(item => item.id === this.editingApi.id);
        this.apiList[index] = {
          ...this.form,
          id: this.editingApi.id,
          status: this.form.status ? 1 : 0,
          createTime: this.editingApi.createTime
        };
        message.success('编辑成功');
      } else {
        // 新增操作
        this.apiList.push({
          ...this.form,
          id: this.apiList.length + 1,
          status: this.form.status ? 1 : 0,
          createTime: new Date().toLocaleString()
        });
        message.success('新增成功');
      }
      this.modalVisible = false;
    },
    handleModalCancel() {
      this.modalVisible = false;
    },
    handleTableChange(pagination) {
      this.pagination = { ...pagination };
    },
    getMethodColor(method) {
      const colorMap = {
        GET: 'blue',
        POST: 'green',
        PUT: 'orange',
        DELETE: 'red'
      };
      return colorMap[method] || 'default';
    }
  }
};
</script>

<style scoped>
.api-management-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.content-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.text-right {
  text-align: right;
}
</style>